<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Test</title>
</head>
<!-- <script src="../../../node_modules/echarts/dist/echarts.min.js"></script> -->

<script src="../../../node_modules/jquery/dist/jquery.js"></script>
<link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="../../../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../../node_modules/vue/dist/vue.js"></script>
<link rel="stylesheet" href="../../../node_modules/element-ui/lib/theme-chalk/index.css">
<script src="../../../node_modules/element-ui/lib/index.js"></script>
<script src="../static/js/index.js"></script>
<script src="../../../node_modules/echarts/dist/echarts.js"></script>

<script src="../../../node_modules/mockjs/dist/mock.js"></script>
<script src="../static/js/mock_config.js"></script>
<script src="../../../node_modules/@jiaminghi/data-view/dist/datav.min.vue.js"></script>


<style>
    .footer {
        position: relative;
    }
    
    #x1 {
        position: absolute;
        border: 1px solid red;
        width: 800px;
        left: 50%;
        transform: translate(-50%, 0%);
    }
    
    @media (min-width: 1400px) {
        .container-xxl,
        .container-xl,
        .container-lg,
        .container-md,
        .container-sm,
        .container {
            max-width: 1880px;
        }
    }
</style>

<body>
    <div id="app">

        <div>
            <!-- <h3 style="color: rgba(0, 0, 0, 0.5);">echarts</h3> -->
            <!-- <div id="echarts_i" style="height: 500px; width: 500px;"></div>
            <div id="zhu" style="height: 500px; width: 500px;"></div> -->
            <div id="zhe" style="height: 500px; width: 100%;"></div>
            <div></div>
        </div>

    </div>


    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    option: {
                        xAxis: {
                            type: 'category',
                            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            data: [150, 230, 224, 218, 135, 147, 260, 300, 1000, 850, 200],
                            type: 'line'
                        }]
                    },
                    option2: {
                        title: {
                            text: 'World Population'
                        },
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'shadow'
                            }
                        },
                        legend: {
                            orient: 'vertical'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: [0, 0.01]
                        },
                        yAxis: {
                            type: 'value',
                            data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                        },
                        series: [{
                            name: '2011',
                            textStyle: {
                                color: "#25c36c"
                            },
                            type: 'bar',
                            data: [18203, 23489, 29034, 104970, 131744, 630230],
                        }, {
                            name: '2012',
                            textStyle: {
                                color: "#25c36c"
                            },
                            type: 'bar',
                            data: [19325, 23438, 31000, 121594, 134141, 681807]
                        }]
                    },
                    option3: {
                        tooltip: {
                            trigger: 'axis'
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [{
                            name: 'Email',
                            type: 'line',
                            stack: 'Total',
                            data: [120, 132, 101, 134, 90, 230, 210]
                        }]
                    },
                    option4: {
                        tooltip: {
                            trigger: 'axis',
                            axisPointer: {
                                type: 'cross',
                                crossStyle: {
                                    color: '#999'
                                }
                            }
                        },
                        legend: {
                            // data: ['Evaporation', 'Precipitation', 'Temperature']
                        },
                        xAxis: [{
                            type: 'category',
                            data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
                            axisPointer: {
                                type: 'shadow'
                            }
                        }],
                        yAxis: [{
                            type: 'value',
                            name: '受注报价套数',
                            min: 0,
                            // max: 250,
                            // interval: 50,
                            axisLabel: {
                                formatter: '{value} 套'
                            }
                        }, {
                            type: 'value',
                            name: '累计受注率',
                            min: 0,
                            // max: 25,
                            // interval: 5,
                            axisLabel: {
                                formatter: '{value} 万'
                            }
                        }],
                        series: [{
                            name: '受注',
                            type: 'bar',
                            data: [3.3, 4.5],
                            itemStyle: { //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'red'
                                        }
                                    }
                                }
                            }
                        }, {
                            name: '报价',
                            type: 'bar',
                            data: [0, 2.2],
                            itemStyle: { //上方显示数值
                                normal: {
                                    label: {
                                        show: true, //开启显示
                                        formatter: function(params) {
                                            if (params.value > 0) {
                                                return params.value;
                                            } else {
                                                return '';
                                            }
                                        },
                                        position: 'top', //在上方显示
                                        textStyle: { //数值样式
                                            color: 'red'
                                        }
                                    }
                                }
                            }
                        }, {
                            symbol: 'circle', // 设置标记的图形为circle
                            name: 'Temperature',
                            type: 'line',
                            yAxisIndex: 1,
                            data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 0, 23.4, 0, 16.5, 12.0, 6.2],
                            lineStyle: {
                                normal: {
                                    width: 3,
                                    color: 'red'
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: "red",
                                    label: {
                                        formatter: function(params) {
                                            if (params.value > 0) {
                                                return params.value;
                                            } else {
                                                return '';
                                            }
                                        },
                                        show: true,
                                    }
                                }
                            },
                            areaStyle: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 0,
                                        color: 'rgb(242, 148, 26)' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: 'rgba(229, 160, 71)' //   100% 处的颜色
                                    }],
                                    global: false // 缺省为 false

                                }
                            }
                        }]
                    },
                    option5: {
                        title: {
                            text: 'Step Line'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '5%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            },
                        },
                        xAxis: {
                            name: '时间(秒)',
                            top: 5,
                            axisLine: {
                                symbol: ['none', 'arrow']
                            },
                            axisLabel: {
                                formatter: '{value} 秒'
                            },
                            boundaryGap: true,
                            position: 'top',
                            type: 'value',
                            data: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13']
                        },
                        yAxis: {
                            axisLabel: {
                                formatter: '第{value}步'
                            },
                            inverse: true,
                            type: 'value',
                            name: '工序步骤'
                        },
                        series: [{
                            "name": "coding: 开启机器开关",
                            "type": "line",
                            "data": [
                                [
                                    0,
                                    1
                                ],
                                [
                                    4.13,
                                    1
                                ]
                            ]
                        }, {
                            "name": "coding: 等待机器启动",
                            "type": "line",
                            "data": [
                                [
                                    4.13,
                                    2
                                ],
                                [
                                    17.88,
                                    2
                                ]
                            ],
                            "lineStyle": {
                                "normal": {
                                    "color": "green",
                                    "width": 4,
                                    "type": "dashed"
                                }
                            }
                        }, {
                            "name": "null: 等待",
                            "type": "line",
                            "data": [
                                [
                                    4.13,
                                    3
                                ],
                                [
                                    7.359999999999999,
                                    3
                                ]
                            ]
                        }, {
                            "name": "coding: 放入原材料",
                            "type": "line",
                            "data": [
                                [
                                    7.359999999999999,
                                    4
                                ],
                                [
                                    12.86,
                                    4
                                ]
                            ]
                        }, {
                            "name": "coding: 机器运转",
                            "type": "line",
                            "data": [
                                [
                                    12.86,
                                    5
                                ],
                                [
                                    22.990000000000002,
                                    5
                                ]
                            ],
                            "lineStyle": {
                                "normal": {
                                    "color": "green",
                                    "width": 4,
                                    "type": "dashed"
                                }
                            }
                        }, {
                            "name": "null: 走动",
                            "type": "line",
                            "data": [
                                [
                                    12.86,
                                    6
                                ],
                                [
                                    17.06,
                                    6
                                ]
                            ]
                        }, {
                            "name": "LT: 关闭机器",
                            "type": "line",
                            "data": [
                                [
                                    17.06,
                                    7
                                ],
                                [
                                    22.259999999999998,
                                    7
                                ]
                            ]
                        }, {
                            "name": "null: 走动",
                            "type": "line",
                            "data": [
                                [
                                    22.259999999999998,
                                    8
                                ],
                                [
                                    25.459999999999997,
                                    8
                                ]
                            ]
                        }, {
                            "name": "最小值",
                            "type": "line",
                            "data": [
                                [
                                    22.99,
                                    0
                                ],
                                [
                                    22.99,
                                    10
                                ]
                            ]
                        }, {
                            "name": "最大值",
                            "type": "line",
                            "data": [
                                [
                                    25.46,
                                    0
                                ],
                                [
                                    25.46,
                                    10
                                ]
                            ]
                        }],
                    },
                    option6: {
                        tooltip: {
                            trigger: 'axis' //鼠标悬浮上去显示
                        },
                        xAxis: {
                            type: 'category',
                            data: ['WXKH-0007', 'WXKH-0131', 'WXKH-0128', 'WXKH-0002', 'WXKH-0138', 'WXKH-0140', 'WXKH-0106', 'PTKH-0011'],
                            axisLabel: {
                                interval: 0,
                                rotate: 28,
                                textStyle: { //改变xy轴上文字的颜色
                                    color: "#FFF"
                                }
                            }
                        },
                        yAxis: {
                            type: 'value',
                            axisLabel: {
                                textStyle: {
                                    color: "#FFF"
                                }
                            }
                        },
                        series: [{
                            // symbol: 'circle',
                            // symbolSize: 9, //设置实心圆的大小
                            data: [150, 230, 224, 218, 135, 147, 260, 300],
                            type: 'bar',
                            // lineStyle: {
                            //     normal: {
                            //         width: 5 //设置折线的宽度
                            //     }
                            // },
                            itemStyle: {
                                normal: {
                                    label: {
                                        show: true,
                                        color: "#FFF"
                                    }
                                }
                            }
                        }]
                    }

                }


            },
            mounted() {
                var chartDom = document.getElementById('zhe');

                // var myChart = echarts.init(chartDom);

                // // 获取数据 this.option.series[0].data

                // var 报价 = [];
                // var 受注 = [];

                // GetCodeData("", "Get", "dev").then(function(res) {
                //     res.rows.forEach(element => {

                //         Object.values(element).forEach(item => {
                //             if (element.type == "报价") {
                //                 if (typeof(item) == "number") {
                //                     报价.push(item)
                //                 }
                //             } else {
                //                 if (typeof(item) == "number") {
                //                     受注.push(item)
                //                 }
                //             }
                //         });
                //     });
                var myChart = echarts.init(chartDom);
                var myChart = echarts.init(chartDom);
                myChart.setOption(this.option4)
            }

        })

        setTimeout(() => {
            // this.option4.series[0].data = 报价
            // this.option4.series[1].data = 受注
            // myChart.setOption(this.option4);
        }, 1000);
    </script>
</body>

</html>